<template>

  <div class="container">
    <HeaderBar :currentName="_t18('sidebar_jifen', ['aams', 'robinhood2'])"></HeaderBar>

    <!--商品详情 start-->
    <van-image class="goods-item-image"  :src="goods.picture"></van-image>
    <div style="padding:  0 5%">
      <div class="goods-price">
        <span>{{ goods.costPoint }}</span> 积分
      </div>
      <div class="goods-name" style="display: flex;align-items: center;justify-content: space-between">
        <!--      <el-button round size="small">{{ goods.goodsBrand.goodsBrandName }}标题</el-button>-->
        <span>{{ goods.productName }}</span>

        <!--      <span>{{ goods.goodsCaption }}副标题</span>-->
      </div>

      <div class="xiangqing">
        <div style="font-size: 16px;font-weight: bold;">
          商品详情
        </div>
        <div style="margin-top: 5%">{{ goods.detail }}
        </div>
      </div>
    </div>


      <!--商品详情 end-->

    <!--底部导航 start-->
    <!--    <van-action-bar style="margin-bottom: 50px ">-->
    <!--  -->
    <!--      <van-action-bar-button type="warning" text="加入购物车" @click="onAddCartShow"/>-->
    <!--      <van-action-bar-button type="danger" text="立即购买"/>-->
    <!--    </van-action-bar>-->
    <!--底部导航 end-->
<div style="height: 80px;width: 100%;">

</div>
    <div>
      <van-action-bar-button style="padding: 10px 50px;position:fixed;bottom: 0;width: 28.3%;border-radius: 14px;    width: 90%;
    margin: 0 5%;" type="danger" :text="addressId || type == 1?'立即兑换':'选择地址'" @click="sub"/>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {_t18} from "@/utils/public";
import {pointsproduct, productexchange, productList} from "@/api/account";
import {useUserStore} from "@/store/user";
import {useRouter} from "vue-router";
import {showToast} from "vant";
import Router from "@/router";
const route = useRoute()

const userStore = useUserStore()
const $router = useRouter()
//加入购物车弹出框控制器
const showCart = ref(false)
//商品id

//商品数据
const goods = ref({

})
const list = ref()
const id = route.query.id
const type = route.query.item


const addressId = route.query.data
const cancelOrder = async () => {
  console.log(id,'route.params.id')
  const res = await pointsproduct(id)
  goods.value = res.data
}
const sub = async () => {

  if (!addressId && type != 1){
    $router.push('/address?id='+id)
  }

  let par = {
    productId:id,
    addressId:addressId
  }
  const res = await productexchange(par)
  if (res.code == '200') {
    showToast('兑换成功！')
    setTimeout(() => {
      $router.push('/points')
    }, 500)
  } else {
    showToast(res.msg)
  }
}
onMounted(() => {
  cancelOrder()
})
/**
 * 加入购物车弹出框
 */
const onAddCartShow = () => {
  showCart.value = true
}



</script>

<style scoped>
.container {
  background-color: #ffffff;
  height: 100vh;
}

/**
商品数据样式
 */
.goods-price {
  margin-top: 10px;
  color: #ff4142;
}

.goods-price span {
  font-style: normal;
  font-family: JDZH-Regular, sans-serif;
  display: inline-block;
  font-size: 22px;
  font-weight: 500;
  line-height: normal;
  color: #f44d0b;
}

.goods-name {
  font-size: 21px;
  color: #181818;
  font-family: JDZH-Regular, sans-serif;
  margin-top: 4%;
}

.goods-name button {
  margin: 4px;
  display: inline;
  color: #fdfdff;
  font-weight: 400;
  background-color: #fe012d;
}
.xiangqing{
  margin-top: 5%;
}
.goods-sp {
  background-color: #f7f7f7;
  border-radius: 2%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.goods-sp-item {
  padding: 8px;
}

.goods-sp-item span {
  font-size: 12px;
  font-weight: bold;
}

.goods-introduction {
  background-color: #f7f7f7;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.goods-introduction span {
  padding: 10px;
}

.goods-name span {
  margin-left: 5px;
  font-size: 16px;
  font-weight: bold;
}

/*加入购物车弹出框样式*/
.add-cart-show {
  height: 500px;
}

.add-cart-show button {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 350px;
  color: #faf7e7;
  font-weight: 700;
}

.add-header {
  display: flex;
  position: fixed;
  left: 10px;
  top: 70px;
  z-index: 100;
  background-color: #ffffff;

}

.add-goods-img {
  margin: 10px;
  width: 80px;
}

.add-goods-price {
  margin-left: 20px;
  margin-top: 35px;
  color: #ff4142;
  font-size: 15px;
}

.add-goods-price span {
  font-style: normal;
  font-family: JDZH-Regular, sans-serif;
  display: inline-block;
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
  color: #f44d0b;
}

.add-address {
  margin-top: 110px;
}

.add-goods-specification {
  margin-top: 20px;
}
.goods-item-image{
  width: 100% ;
}
</style>
